<template>
  <div>
    <!-- {{ store.list }} -->
    <div class="trightBox" ref="chartRef" style="width: 600px; height: 300px;"></div>
    <!-- {{ titleArr }} -->
  </div>
</template>
  
<script setup lang='ts'>
import { reactive, ref, toRefs, onMounted, computed, watch } from 'vue';
import * as echarts from 'echarts';
import { taskAnalyseStore } from '@/store/taskAnalyse';
import { log } from 'console';
import QueryString from 'qs';
import { tr } from 'element-plus/es/locale';
const arr = reactive({
  title: [] as any
})
const store = taskAnalyseStore()
// 获取echarts的dom元素

let chartRef = ref();
// 定义收益柱状图数据
let option = reactive({
  legend: {
    textStyle: {
      color: "#fff",
    },
  },
  tooltip: {},
  dataset: {
    dimensions: ['product', 'count', 'time',],
    source: Object.keys(store.list).map((item, index) => {
      let counts = 0
      store.list[item].map(item => {
        // console.log(item.count);
        counts += Number(item.count)
      })
      console.log(counts);

      return {
        product: item, count: counts, time: 20
      }
    })
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      //X轴文字
      fontSize: 14,
      color: "#fff",
    },
  },
  yAxis: {
    axisLabel: {
      //Y轴刻度值
      fontSize: 14,
      color: "#fff",
    },
  },
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [{
    type: 'bar',
    barWidth: 15,
    itemStyle: {
      //设置颜色的渐变
      borderRadius: 50,
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: "#08dd9d",
        },
        {
          offset: 1,
          color: "#26d4cc",
        },
      ]),
    },
  },
  {
    type: 'bar',
    barWidth: 15,
    itemStyle: {
      //设置颜色的渐变
      borderRadius: 50,
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: "#ffffff",
        },
        {
          offset: 1,
          color: "#26d4cc",
        },
      ]),
    },
  },]
});
onMounted(() => {
  let profitCharts = echarts.init(chartRef.value);
  profitCharts.setOption(option);
  profitCharts.on('click', (params) => {
    const clickedData = params.data; // 获取点击的柱状图数据
    console.log(clickedData);
    // 执行其他操作，例如根据点击的柱状图数据进行进一步处理
  });

});
watch(
  () => store.list,
  () => {
    option.dataset.source = Object.keys(store.list).map((item) => {
      let counts = 0;
      store.list[item].forEach((item) => {
        counts += Number(item.count)
      });
      return {
        product: item,
        count: counts,
        time: 20,
      };
    });
    const profitCharts: any = echarts.getInstanceByDom(chartRef.value);
    profitCharts.setOption(option);
  }
);
</script>
<style scoped lang='scss'></style>